<template>
    <div>
        <div class="search">
            <input
                    class="search-input"
                    type="text"
                    placeholder="输入城市名或拼音"
                    v-model="keyword"
            >
        </div>
        <div
            v-show="keyword"
            class="search-content" ref="searchScroll"
        >
            <ul>
                <li class="search-item border-bottom"
                    v-for="item of list"
                    :key="item.id"
                    @click="handleCityClick(item.name)"
                >
                    {{item.name}}
                </li>
                <li v-show="hasNoData"
                    class="search-item border-bottom"
                >
                    没有找到匹配数据
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'
    import {mapMutations} from 'vuex'

    export default {
        name: "Search",
        props:{
          cities:Object
        },
        data () {
          return {
              keyword:'',
              list:[],
              timer:null
          }
        },
        computed : {
           hasNoData:function () {
               return !this.list.length;
           }
        },
        mounted () {
            this.scroll = new BScroll(this.$refs.searchScroll)
        },
        watch:{
            keyword () {
                if(this.timer){
                    clearTimeout(this.timer)
                }
                if(!this.keyword){
                    this.list=[];
                    return ;
                }
                this.timer=setTimeout(() =>{
                    const result=[];
                    for(let i in this.cities){
                        // 每一个数组 再做一次遍历
                        this.cities[i].forEach((value) => {
                            // 每一项的拼音 汉字名字 里面有  输入的内容
                                if(value.spell.indexOf(this.keyword)>-1 ||
                                    value.name.indexOf(this.keyword)>-1
                                ){
                                    result.push(value)
                                }
                            }

                        )
                    }
                    this.list=result;
                },100)
            }
        },
        methods:{
            handleCityClick (city) {
                // changeCity这样的Action，派发一个名字是changeCity的事件
                // 但是vuex在创建store的时候并没有这个事件
                // this.$store.dispatch('changeCity',city)
                // 直接调用
                // this.$store.commit('changeCity',city)
                //优化代码
                this.changeCity(city);
                // 跳转到首页
                this.$router.push('/');
                // alert(city)
            },
            ...mapMutations(['changeCity'])
        }
    }
</script>

<style lang="stylus" scoped>
@import "~styles/variables.styl"
.search
    height:.72rem
    padding:0 0.1rem
    background: $bgcolor
.search-input
    height:.62rem
    line-height:.62rem
    width: 100%
    text-align: center
    -webkit-border-radius: 0.06rem
    -moz-border-radius: 0.06rem
    border-radius: 0.06rem
    color: #666
    -webkit-box-sizing: border-box
    -moz-box-sizing: border-box
    box-sizing: border-box
    padding:0 0.2rem
.search-content
    position absolute
    top:1.58rem
    left:0
    right:0
    bottom 0
    overflow hidden
    background: #eee
    z-index: 1
.search-item
    line-height:0.62rem
    padding-left:0.2rem
    color #666
    background: #fff
</style>